<template>
	<view class="view_pages">
		<u-navbar :is-back="true" :custom-back="gotabpolice" back-icon-color="#000000" title-size="34" title="订单详情" :background="background"
			:border-bottom="false" title-color="#000000"></u-navbar>

		<view class="header">
		   <image src="https://pocket-dev.oss-cn-shenzhen.aliyuncs.com/upload/GJgZFmaXLDpl744330ce56fc4f93f1a9e434213514c0_1631193558281.png" mode=""></image>
			   {{detalis.pdCharginOrder.deviceCode}} - {{detalis.pdCharginOrder.portNum}} 号端口
		</view>
		<view class="content">
			<view class="li">
				<view class="left">端口号</view>  <view class="right">{{detalis.pdCharginOrder.portNum}} 号端口</view>
			</view>
			<view class="li" v-if="detalis.pdCharginOrder.buyType == 1">
				<view class="left">购买类型</view>  <view class="right " >充满即停</view>
			</view>	
			<view class="li" v-if="detalis.pdCharginOrder.buyType == 2">
				<view class="left">购买类型</view>  <view class="right " >按度购买</view>
			</view>
			<view class="li" v-if="detalis.pdCharginOrder.buyType == 3">
				<view class="left">购买类型</view>  <view class="right " >按时间购买</view>
			</view>	
			
			<view class="li" v-if="detalis.pdCharginOrder.chargingStatus == 0">
				<view class="left">订单状态</view>  <view class="right " style="color:#48D499">进行中</view>
			</view>
			<view class="li" v-if="detalis.pdCharginOrder.chargingStatus == 1">
				<view class="left">订单状态</view>  <view class="right " style="color:#48D499">设备断电<br/>(可能是手动拔出充电器或已充满)</view>
			</view>	
			<view class="li" v-if="detalis.pdCharginOrder.chargingStatus == 2">
				<view class="left">订单状态</view>  <view class="right " style="color:#FABA30">余额不足</view>
			</view>	
			<view class="li" v-if="detalis.pdCharginOrder.chargingStatus == 3">
				<view class="left">订单状态</view>  <view class="right " style="color:#48D499">充电完成</view>
			</view>	
			<view class="li" v-if="detalis.pdCharginOrder.chargingStatus == 4">
				<view class="left">订单状态</view>  <view class="right " style="color:#ED8C8C">自动关闭</view>
			</view>
			<view class="li" v-if="detalis.pdCharginOrder.chargingStatus == 5">
				<view class="left">订单状态</view>  <view class="right " style="color:#ED8C8C">手动关闭</view>
			</view>	
			
			<view class="li">
				<view class="left">支付口袋币</view>  <view class="right">{{detalis.pdCharginOrder.coins}} PdCoin</view>
			</view>
			<view class="li">
				<view class="left">实际使用口袋币</view>  <view class="right">{{detalis.pdCharginOrder.coinsConsume}} PdCoin</view>
			</view>
			<view class="li" v-if="detalis.pdCharginOrder.chargingStatus != 0">
				<view class="left">退回口袋币</view>  <view class="right">{{detalis.pdCharginOrder.coinsBack}} PdCoin</view>
			</view>
			<view class="li">
				<view class="left">充电时长</view>  <view class="right"> {{detalis.runStatusVo.duration}} </view>
			</view>
			<view class="li">
				<view class="left">累计充电</view>  <view class="right">{{detalis.pdCharginOrder.elecConsume}} 度</view>
			</view>
			<view class="li">
				<view class="left">电站地址</view>  <view class="right">{{detalis.pdCharginOrder.charginAddress}}</view>
			</view>
			<view class="li">
				<view class="left">订单时间</view>  <view class="right">{{detalis.pdCharginOrder.startTime}}</view>
			</view>
			<view class="li">
				<view class="left">订单编号</view>  <view class="right">{{detalis.pdCharginOrder.id}}</view>
			</view>
		</view>
		
		<view class="endchar" v-if="detalis.pdCharginOrder.chargingStatus == 0" @click="endchar(detalis.pdCharginOrder.id)">
			<view class="text">
				结束订单
			</view>
		</view>
		<view class="copyright" style="color: #AAAAAA;">
			<view>Copyright©2021</view>
			<view>领程工场软件科技 IOT物联网平台</view>
		</view>	
		<view class="maskshop" v-if="shopstop == true"></view>
	</view>
</template>

<script>
	import {findCharginOrderById,stopOrder} from '../../api/charging'
	export default {
		data() {
			return {
				shopstop:false,
				background:{ background: '#ffffff' },	
				orderid:'',
				detalis:''
			}
		},
		onLoad(option){
			console.log(option)
			this.orderId = option.orderId
			this.findorder(option.orderId)
		},
		methods: {
			//用于重定向过来的页面返回
			gotabpolice(){
				uni.reLaunch({
					url:'./order-list'
				})
			},
			//结束订单
			endchar(row){
				console.log(row)
				let _this = this
				this.shopstop = true
				stopOrder(row).then(res=>{
					
					if(res.code==200){
						
						this.shopstop = false
						uni.showToast({
							title: '操作成功',
							duration: 1000,
							icon:'success'
						});
						
						setTimeout(function () {
						    _this.findorder(row)
						}, 1000);
					}
					
				})
			},
			findorder(orderid){
				findCharginOrderById(orderid).then(res=>{
					console.log(res,'详情')
					this.detalis  = res.result
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.endchar{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 690rpx;
		margin: 0 auto;
		height: 100rpx;
		margin-top: 100rpx;
		margin-top: 50rpx;
		background-image: url('https://pocket-dev.oss-cn-shenzhen.aliyuncs.com/upload/XX2k5Us0xQ8k759c77117db2b8dfcca1760f38113b68_1632883684985.png') ;
		background-size: 100% ;
		border-radius: 16rpx;
		image {
			width: 46rpx;
			height: 26rpx;
		}
		.text {
			margin-left: 14rpx;
			font-size: 30rpx;
			color: #ffffff;
			font-weight: 400;
		}
	}
	.view_pages{
		height: 100%;
		width: 100%;
		background-color: #F2F2F2;
		padding: 0rpx 30rpx;
		
	}
	.header{
		width: 100%;
		margin: 0 auto;
		height: 132rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 8rpx 6rpx rgba(215, 215, 215, 0.15);
		border-radius: 12rpx;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 40rpx;
		font-weight: 400;
		color: #000000;
		margin: 30rpx 0rpx;
		image{
			width: 64rpx;
			height: 64rpx;
			margin-right: 32rpx;
		}
	}
	.content{
		width: 100%;
		margin: 0 auto;
		background: #FFFFFF;
		box-shadow: 0px 0px 8rpx 6rpx rgba(215, 215, 215, 0.15);
		border-radius: 12rpx;
		.li{
			display: flex;
			align-items: center;
			height: 100rpx;
			border-bottom: 1px solid #F1F1F1;
			.left{
				font-size: 26rpx;
				font-weight: 400;
				color: #818182;
				text-indent: 1rem;
				width: 30%;
			}
			.right{
				font-size: 28rpx;
				font-weight: 400;
				color: #4A4A4A;
				width: 65%;
				text-align: right;
				
			}
			.error{				
				font-size: 24rpx;
				font-weight: 400;
				color: #EF5757;
			}
			.finish{
				color: #0A348B;
			}
		}
		.li:last-child{
			border-bottom: 0px solid #F1F1F1;
		}
	}
</style>
